<!--  -->
<template>
  <div>
    <div v-show="!ResFileName">
      <div class="el-table__empty-block"><span class="el-table__empty-text">暂无数据</span></div>
    </div>
    <div ref="imageContainer" class="image-container" v-show="ResFileName">
      <el-image ref="image" :src="ResFileName"></el-image>
    </div>
  </div>
</template>

<script>
import { parseTime, getNowDay } from "@/utils/index.js";
import { connrequest } from '@/api/firstPage.js';
export default {
  data() {
    return {
      ResFileName: ''
    }
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.Moder = JSON.parse(sessionStorage.getItem('detailStatus'))
    this.GetScreenLog()
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {

  },
  methods: {
    async GetScreenLog() {
      const data = {
        Paging: {
          QueryPageNo: 1,
          QueryPageLength: 100000000
        },
        Filter: {
          DeviceUUID: this.Moder.DeviceUUID,
          StartTime: getNowDay('time'),
          EndTime: '',
        }
      }
      const res = await connrequest('GetScreenLog', data)
      res.Data = res.Data || []
      const previewSrcList = []
      res.Data.forEach((item, index) => {
        // 格式化时间戳
        item.TransTime = parseTime(item.TransTime, '{y}-{m}-{d} {h}:{i}:{s}')
        // 分割日期和时间
        const [date] = item.TransTime.split(' ')
        // 构建文件路径
        const fileName = `${window.location.protocol}//${window.location.host}/screen/${date}/${item.ResFileName}`
        item.ResFileName = fileName
        previewSrcList.push(fileName)
      })
      this.ResFileName = previewSrcList[previewSrcList.length - 1]
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
.image-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 145px);
  overflow: hidden;
}
</style>